/** { "style":{ "navigationBarTitleText":"门店详情", "navigationStyle": "default" } } */

<template>
	<view :class="[isiPhone ? 'pb-180' : 'pb-140', 'detail']">
		<view class="swiper-box">
			<v-swiper :height="swiperHeight" :list="details.images" />
			<!-- <u-swiper :list="res.imgs" :indicator="true" :height="swiperHeight"
				indicatorMode="dot"></u-swiper> -->
		</view>

		<view class="info">
			<view class="title">{{details.name}}</view>

			<view class="info-1 mt30 display_flex">
				<image class="w28 h28 mt5 flex-shrink" src="__ROOT__/common/images/time-1.png" mode=""></image>
				<view class="text">{{details.w_name}} {{details.stime}}-{{details.etime}}</view>
			</view>

			<view class="info-1 mt20 display_flex">
				<image class="w28 h28 mt5 flex-shrink" src="__ROOT__/common/images/place-1.png" mode=""></image>
				<view class="text">{{details.address}}</view>
			</view>
		</view>

		<view class="item-bottom display_flex">
			<view class="bott-box flex_1 flex-all-c br" @click="onDaohang">
				<image class="w36 h36 mr12" src="__ROOT__/common/images/place-2.png" mode=""></image>
				地址导航
				<image class="w11 h18 ml12" src="__ROOT__/common/images/row-r2.png" mode=""></image>
			</view>

			<view class="bott-box flex_1 flex-all-c" @click="onPhone">
				<image class="w36 h36 mr12" src="__ROOT__/common/images/phone1.png" mode=""></image>
				拨打电话
				<image class="w11 h18 ml12" src="__ROOT__/common/images/row-r2.png" mode=""></image>
			</view>
		</view>

		<view class="detail1">
			<view class="title-d">
				详情介绍
			</view>
			<u-parse :content="details.content"></u-parse>
		</view>

		<view :class="[isiPhone? 'pb-68':'pb-32', 'fixed_b']">
			<view class="footer-f">
				<view class="btn-w flex-all-c" @click="yuyue">
					<view class="t relative">
						<view class="add">
							+
						</view> 预约验车
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="showPopup" :round="roundPopup" @close="showPopup = false">
			<view class="content-p">

				<view class="item flex-lr-tbc" v-if="userInfo.is_yw == 1">
					<view class="title">
						是否代付：
					</view>

					<view class="right flex-tbc input-right">
						<view class="tab-list flex-tbc">
							<view class="active item flex-all-c ml24" v-for="item in checkqc" :key="item.value"
								@click="onCharType(item)">
								<image v-show="checkV == item.value" class="wh28"
									src="__ROOT__/common/images/radio1-2.png" mode=""></image>
								<image v-show="checkV != item.value" class="wh28"
									src="__ROOT__/common/images/radio1-1.png" mode=""></image>

								<view class="label label1 ml8">
									{{ item.label }}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="item flex-tbc" @click="onKehu" v-if="checkV == 1">
					<view class="title">
						客户：
					</view>

					<view class="right flex_1 display_flex justify-content_flex-end input-right">
						<picker-text class="picker-s" :pickerValue="formData.kuhu" placeholder="请选择" />
					</view>

				</view>

				<view class="item flex-tbc">
					<view class="title">
						车辆：
					</view>

					<view class="right flex_1 display_flex justify-content_flex-end input-right">
						<picker-text class="picker-s" :pickerValue="formData.cheliang" placeholder="请选择" />
					</view>

				</view>

				<view class="btn-w flex-all-c mt40" @click="yuyue">
					<view class="t relative">
						<view class="add">
							+
						</view> 预约验车
					</view>
				</view>

			</view>
		</u-popup>

		<v-picker :show="showPicker" :columns="columns" :keyName="keyName" :pickerCurrent="pickerCurrent"
			@close="showPicker = false" @confirm="onPicker" />
	</view>
</template>
<script setup>
	import pickerText from '@/components/picker-text.vue';
	import vPicker from '@/components/v-picker.vue';
	import vSwiper from '@/components/vSwiper.vue';
	import {
		ref,
		onMounted,
		nextTick,
		reactive
	} from 'vue';
	const isiPhone = ref('');
	const statusBar = ref('');
	const customBar = ref('');
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone');
		statusBar.value = uni.getStorageSync('statusBar');
		customBar.value = uni.getStorageSync('customBar');
	};

	const pageId = ref('');

	const swiperHeight = uni.upx2px(684);

	const details = ref({});

	const userInfo = ref({})

	const yuyue = () => {
		const token = uni.getStorageSync('token');
		if (!token) {
			uni.showModal({
				title: '温馨提示',
				content: '请先登录~',
				showCancel: false,
				confirmText: '去登录',
				confirmColor: '#0f956e',
				complete() {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			})
			return
		}

		if (userInfo.value.is_buy == 0) {
			uni.showModal({
				title: '温馨提示',
				content: '暂无预约权限~',
				showCancel: false,
				confirmText: '确认',
				confirmColor: '#0f956e',
				complete() {

				}
			})
			return
		}

		uni.navigateTo({
			url: '/pages/mendian/mendian/order?id=' + pageId.value
		});
	};


	const getDetails = async () => {
		let res = await $post('/stores/get_stores_info', {
			id: pageId.value
		});
		details.value = res.info;
	}

	const customerList = ref({})
	const getKehuList = async () => {
		const res = await $post('/stores/my_customer')
		customerList.value = res.list
	}

	const onDaohang = () => {
		uni.openLocation({
			latitude: Number(details.value.latitude),
			longitude: Number(details.value.longitude),
			name: details.value.name,
			address: details.value.address
		})
	}
	const onPhone = () => {
		// 拨打电话
		uni.makePhoneCall({
			phoneNumber: details.value.tel
		})
	}

	const getUserInfo = async () => {
		const res = await $post('/user/get_user')
		userInfo.value = res.info
		if (userInfo.value.is_yw == 1) {
			console.log('123123123')
			getKehuList()
		}
	}

	const showPopup = ref(false)
	const roundPopup = ref(15);

	const checkV = ref(0);
	const checkqc = ref([{
			value: 1,
			label: '是'
		},
		{
			value: 0,
			label: '否'
		}
	]);

	const onCharType = (e) => {
		checkV.value = e.value
	}

	const formData = reactive({
		kuhu: '',
		cheliang: ''
	})

	const showPicker = ref(false)
	const columns = ref([])
	const keyName = ref('label')
	const pickerCurrent = ref('')

	const pickerType = ref('')
	const onKehu = () => {
		columns.value = [customerList.value]
		console.log(columns.value, 'columns.valuecolumns.value')
		keyName.value = 'nickname'
		pickerCurrent.value = formData.kuhu
		showPicker.value = true
		pickerType.value = 'kehu'
	}
	
	const onPicker = (v) => {
		if(pickerType.value == 'kehu') {
			console.log(v, '123213')
		}
		
	}


	Vue.onShow(() => {
		initPage();
	});
	Vue.onLoad((options) => {
		pageId.value = options.id;
		getDetails();
		const token = uni.getStorageSync('token');
		if (token) {
			getUserInfo()
		}
	});
</script>
<style scoped lang="scss">
	.info {
		padding: 26rpx 24rpx 38rpx;
		background-color: #fff;

		.title {
			font-family: OPPOSans, OPPOSans;
			font-weight: 500;
			font-size: 36rpx;
			color: #1a191a;
			line-height: 48rpx;
		}

		.info-1 {
			.text {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				margin-left: 4rpx;
			}
		}
	}

	.item-bottom {
		margin-top: 34rpx;
		height: 82rpx;
		border-top: 1rpx soild #F5F5F5;
		background-color: #fff;

		.bott-box {
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 28rpx;
			color: #348b8a;
			position: relative;

			&.br {
				&::after {
					display: block;
					content: '';
					width: 0rpx;
					height: 37rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 1rpx solid #348b8a;
					opacity: 0.3;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}

	.detail1 {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 24rpx;

		.title-d {
			padding: 30rpx 0;
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 28rpx;
			color: #909397;
			text-align: center;
		}
	}

	.t {
		padding-left: 46rpx;
	}

	.add {
		width: 38rpx;
		height: 38rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 3rpx solid #FFFFFF;
		font-size: 28rpx;
		font-weight: 900;
		border-radius: 50%;
		line-height: 32rpx;
		text-align: center;
		margin-right: 8rpx;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translatey(-50%);
	}

	.content-p {
		.item {
			height: 60rpx;
			margin-bottom: 20rpx;

			.title {
				width: 180rpx;
				padding-right: 20rpx;
			}
		}
	}
</style>